<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/personal.css">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/logo.png">
    <title>personal</title>
</head>
<body>
    <img src="./img/z_beijing.png" alt="" class="pe1">
    <img class="pe2" onclick="exit()" src="./img/z_tuichu.png" alt="">
    <img src="./img/z_touxiang.png" alt="" class="pe3">
    <div class="avatar">
        <div class="top1">
            <p class="w1">游侠</p>
            <img src="./img/z_genggai.png" alt="" class="pe4">
        </div>
        <div class="top2">
            <div class="pe5">1 普陀山</div>
            <div class="pe6">普通会员 </div>
        </div>
    </div>
    <div class="card">
        <img src="./img/z_pe7.png" alt="" class="pe7">
        <img src="./img/z_pe8.png" alt="" class="pe8">
        <img src="./img/z_pe9.png" alt="" class="pe9">
        <div class="word">
            <p class="w2">游侠风户外会员·尊享版</p>
            <p class="w22">每周一次免费旅行·线路装备专享折扣</p>
        </div>
        <div class="buy">立即开通
            <img class="bg1" src="./img/z_liji1.png" alt="">
        </div>
    </div>
    <div class="user">
        <div class="userTop">
            <p class="w3">全部订单</p>
            <img class="bg2" src="./img/z_quanbu.png" alt="">
        </div>
        <div class="userBottom1">
            <div class="userBottom">
            <img class="bg4" src="./img/z_waitverify.png" alt="">
            <p>待确认</p>
            </div>
            <div class="userBottom">
                <img class="bg4" src="./img/z_waitpay2.png" alt="">
                <p>代付款</p>
            </div>
            <div class="userBottom">
                <img class="bg4" src="./img/z_waitpay3.png" alt="">
                <p>已付款</p>
            </div>
            <div class="userBottom">
                <img class="bg4" src="./img/z_waitpay4.png" alt="">
                <p>待评价</p>
            </div>
            <div class="userBottom22">
                <img class="bg44" src="./img/z_waitpay5.png" alt="">
                <p>退款/售后</p>
            </div>
        </div>


    </div>
    <div class="user2">
        <div class="userTop2">
            <p class="w3">我的钱包</p>
        </div>
        <div class="userBottom12">
            <div class="muser">
                <p class="w4"><span class="w44">0</span>元</p>
                <div class="muserBottom">
                    <img class="bg5" src="./img/z_yue.png" alt="">
                    <span class="w4">余额</span>
                </div>
            </div>
            <div class="muser">
                <p class="w4"><span class="w44">0</span>张</p>
                <div class="muserBottom">
                    <img class="bg5" src="./img/z_yuhui.png" alt="">
                    <span class="w4">优惠卷</span>
                </div>
            </div>
            <div class="muser">
                <p class="w4"><span class="w44">0</span>个</p>
                <div class="muserBottom">
                    <img class="bg5" src="./img/z_youxiabi.png" alt="">
                    <span class="w4">游侠币</span>
                </div>
            </div>
            
        </div>
    </div>
    <div class="user3">
        <p class="w3">全部订单</p>
        <div class="userContain">
            <div class="userbox">
                <img class="bg55" src="./img/z_dizhi.png" alt="">
                <p class="w4">常用收货地址</p>
            </div>
            <div class="userbox">
                <img class="bg55" src="./img/z_chuxing.png" alt="">
                <p class="w4">常用出行人</p>
            </div>
            <div class="userbox">
                <img class="bg55" src="./img/z_password.png" alt="">
                <p class="w4">修改密码</p>
            </div>
            <div class="userbox">
                <img class="bg55" src="./img/z_service.png" alt="">
                <p class="w4">在线客服</p>
            </div>
            <div class="userbox">
                <img class="bg55" src="./img/z_app.png" alt="">
                <p class="w4">游侠客APP</p>
            </div>
            <div class="userbox">
                <img class="bg55" src="./img/z_about.png" alt="">
                <p class="w4">关于游侠客</p>
            </div>
        </div>
    </div>
    <div class="head">
        <div class="head1">精选推荐</div>
    </div>
    <ul class="userbody">
        <!-- <li class="line">
            <img src="https://gallery.youxiake.com/product/line/202407/04/1720087015795.jpg?imageView2/0/q/100" alt="" class="pic1">
            <span class="linetype"></span>
            <p class="line_title">西北传奇·经典/尊享 | 甘青大环线8日西北传奇·经典/尊享 | 甘青大环线8日</p>
            <div class="linemsg">
                <div class="price">
                    <span class="msg1">￥</span>
                    <span class="msg2">3980</span>
                    <span>起</span>
                </div>
                <p class="days">6天5晚</p> 
            </div>
        </li> -->
    </ul>

    <div class="bottom">
        <div class="one" onclick="switchTab(this)">
            <div class="tab-img-container">
                <img class="bg3 default" src="./img/z_shouye2.png" alt="" style="display: block;">
                <img class="bg3 active" src="./img/z_shouye1.png" alt="" style="display: none;">
            </div>
            <p onclick="index()">首页</p>
        </div>
        <div class="one1" onclick="switchTab(this)">
            <div class="tab-img-container">
                <img class="bg3 default" src="./img/z_dngdan1.png" alt="" style="display: block;">
                <img class="bg3 active" src="./img/z_dngdan2.png" alt="" style="display: none;">
            </div>
            <p onclick="order()">订单</p>
        </div>
        <div class="one2" onclick="switchTab(this)">
            <div class="tab-img-container">
                <img class="bg3 default" src="./img/z_geren1.png" alt="" style="display: none;">
                <img class="bg3 active" src="./img/z_geren2.png" alt="" style="display: block;">
            </div>
            <p>个人中心</p>
        </div>
    </div>
    <div class="kongyu"></div>
    <div class="mengceng hide">
        <div class="denglu">
            <div class="exit2">确定退出登录吗？</div>
            <div class="exit3">
                <div onclick="personal()" class="exitleft">否</div>
                <div onclick="back()" class="exitright">是</div>
            </div>
        </div>
    </div>
</body>
<script src="./js/reset.js"></script>
<script>
    const bottomTabs = document.querySelectorAll('.bottom > div'); 
    function switchTab(selectedTab) {
        bottomTabs.forEach(tab => {
            const defaultImg = tab.querySelector('.default'); 
            const activeImg = tab.querySelector('.active'); 
            if (defaultImg && activeImg) {
                defaultImg.style.display = 'block';
                activeImg.style.display = 'none';
            }
            tab.classList.remove('active');
        });
        const selectedDefaultImg = selectedTab.querySelector('.default');
        const selectedActiveImg = selectedTab.querySelector('.active');
        if (selectedDefaultImg && selectedActiveImg) {
            selectedDefaultImg.style.display = 'none';
            selectedActiveImg.style.display = 'block';
        }
        selectedTab.classList.add('active');
    }
    const userbody=document.querySelector('.userbody')
    fetch("https://m.youxiake.com/api/m/product/lines/recommend/user").then(res=> res.json()).then(res1=> {
            console.log(res1.data.products)
            res1.data.products.forEach(item=>{
                userbody.innerHTML+=`
                <li class="line">
                    <img src="${item.img}" alt="" class="pic1">
                    <span class="linetype">${item.place_label} | ${item.productType}</span>
                    <p class="line_title">${item.name}</p>
                    <div class="linemsg">
                        <div class="price">
                            <span class="msg1">￥</span>
                            <span class="msg2">${item.minprice}</span>
                            <span>起</span>
                        </div>
                        <p class="days">${item.days}</p> 
                    </div>
                </li>
                `
            }) 
        }).catch(err=> {
            console.log(err)
        
        })
    function index(){
        window.location.href='Lindex.html';
    }
    
    function order(){
        window.location.href='order_z.html';
    }
    function back(){
        window.location.href='Lindex.html';
    }
    function personal(){
        window.location.href='personal.html';
    }
    function exit(){
        const mengceng = document.querySelector('.mengceng');
        
        mengceng.classList.remove('hide');
    }
    const userBottomElements = document.querySelectorAll('.userBottom, .userBottom22');

userBottomElements.forEach(element => {
  element.addEventListener('click', function() {
    window.location.href = 'order_z.html'; 
  });
});
</script>
</html>